<script setup lang="ts">
import type { MessageBox } from '@/types/notify';
import MessageItem from './components/MessageItem.vue'
import {ref,onMounted} from 'vue'
import axios from 'axios';
const list=ref<MessageBox[]>()
onMounted(async () => {
    const res=await axios.get('/patient/message/sys/list')
    list.value=res.data.data
})
const onClick=(id:string)=>{
  console.log(id);
  
}
const clearUnread=()=>{
  list.value?.forEach(item=>item.number=0)
}
</script>

<template>
  <div class="notify-page">
    <cp-nav-bar title="消息中心" right-text="清除未读" @click-right="clearUnread"></cp-nav-bar>
    <div class="messageList">
      <message-item v-for="item in list" :key="item.id" :item="item" @on-click="onClick"></message-item>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.messageList{
  padding: 20px 10px 0;
  margin-top: 46px;
  overflow: hidden;
  margin-bottom: 46px;
}

</style>
